<template>
  <div  class="app-container">


<!-- vxe检索数据组件 -->
    <search-form
      ref="searchForm"
      :formSearchData.sync="formSearchData"
      :cascaderDemoOptions="cascaderDemoOptions"
      @searchEventEmit="searchEventEmit"
      @resetSearchEventEmit="resetSearchEventEmit"
    >
    </search-form>


    <el-row :gutter="15">
      <el-col :span="24">
        <common-table 
        ref="demoTable"
        :limit.sync="tablePage.pageSize"
        :page.sync="tablePage.currentPage"
        :total="tablePage.totalResult"
        @pagination="pageFindList"
        >
        </common-table>
      </el-col>
    </el-row>



        
  </div>
</template>
<script>
import XEUtils from "xe-utils";
import CommonTable from "@/common/components/CommonTableNew/index.vue";
import { renderToolbarToolsSlots } from "@/common/components/CommonTable/js/renderHandler";
import {
  fetchList,
  fetchPv,
  createArticle,
  updateArticle
  } from '@/api/article2'
import {
  getCategorys
  } from '@/api/cate'
// 检索表单
import SearchForm from './components/SearchForm'


// import tableToolbar from "./js/tableToolbar"

// import CommonTable from "@/common/components/CommonTable/index.vue";
// import { TableRow, TableColumns } from "@/common/utils/tableOptions.js";
// import { sexOption } from "./data/mockOptions";
export default {
  name: "DemoTableOne",
  components: { 
    CommonTable,
    SearchForm
  },
  props: {},
  data() {
    return {
      // tableFilter: {
      //   userName: "",
      //   gender: ""
      // }

      /* 分页相关 */
      tablePage: {
        currentPage: 1, //当前页
        pageSize: 10,  // 每一页页数
        totalResult: 0
      },
      // tableToolbar: tableToolbar,
      tableToolbar: {
        // export: true,
        custom: true,
        /* 左侧自定义按钮 */
        buttons: [
          { 
            buttonRender: { 
            name: 'ToolbarButtonElDiy',
            diyProps:{isCheckSelected:false,btName:"新增",iconClass:"el-icon-upload el-icon--left",inonPosition:"left"},
            props: {type: 'diyfirst',size:'mini'},
            events: { click: this.btnDownEvent }
            } 
          },
          { 
            buttonRender: { 
            name: 'ToolbarButtonElDiy',
            diyProps:{isCheckSelected:true,btName:"属性",iconClass:"el-icon-upload el-icon--right",inonPosition:"right"},
            props: {type: 'primary',size:'mini'},
            events: { click: this.btnDownEvent }
            } 
          },
          { 
            buttonRender: { 
            name: 'ToolbarButtonElDiy',
            diyProps:{isCheckSelected:true,btName:"方案设置"},
            props: {type: '',size:'mini'},
            events: { click: this.btnDownEvent }
            } 
          },
        ],
        slots: {
          /* 右侧自定义工具栏按钮 */
          tools:((params, h) => {
            const toolsParams = [
              {
                toolRender: { 
                name: 'ButtonElDiy',
                diyProps:{isCheckSelected:false,btName:"新增",iconClass:"el-icon-upload el-icon--left",inonPosition:"left"},
                props: {type: 'diyfirst',size:'mini'},
                events: { click: this.btnDownEvent }
                } 
              },
              {
                toolRender: { 
                name: 'ButtonElDiy',
                diyProps:{isCheckSelected:true,btName:"属性",iconClass:"el-icon-upload el-icon--right",inonPosition:"right"},
                props: {type: 'primary',size:'mini'},
                events: { click: this.btnDownEvent }
                } 
              },
              {
                toolRender: { 
                name: 'ButtonElDiy',
                diyProps:{isCheckSelected:true,btName:"方案设置"},
                props: {type: '',size:'mini'},
                events: { click: this.btnDownEvent }
                } 
              },
            ]
            const { $grid } = params
            return renderToolbarToolsSlots(h,$grid,toolsParams)
          })
        }
        /* 以下是自定义右侧工具栏，3.0支持的写法 */
        // tools: [
        //   { name: '自定义XX', code: 'custom2', icon: 'fa fa-bug' },
        //   // { toolRender: { name: 'ToolbarToolPrint' } }
        //   // { toolRender: { 
        //   //   name: 'ToolbarToolElDiy',
        //   //   diyProps:{isCheckSelected:true,btName:"下载"},
        //   //   props: {type: '',size:'mini'},
        //   //   events: { click: this.btnDownEvent }
        //   //   } 
        //   // },
        //   { toolRender: { name: 'ToolbarToolPrint' } }
        // ]
      },

    };
  },
  computed: {},
  mounted() {
    this.createTable();
  },
  methods: {
    btnDownEvent ({rows}) {
      // console.log("buttonbuttonbuttonbutton",button);
      console.log("rowsrowsrowsv",rows);
      // this.$refs.demoTable.$refs.xGrid.exportData()
    },
    // insert() {
    //   this.$refs.demoTable.insertRow().then(res => {
    //     console.log("插入空行", res);
    //   });
    // },
    pageFindList({page,limit}){
      this.tablePage.currentPage = page
      this.tablePage.pageSize = limit
      this.findlists()
    },
    getTableData(column) {
      this.$nextTick(() => {
        this.$refs.demoTable.SetColumn(column, {
          toolbarConfig: this.tableToolbar,
          treeConfig:{
            expandAll: true,
            children: 'children', 
            accordion: true, 
            line: true, 
            iconOpen: 'fa fa-minus-square-o', 
            iconClose: 'fa fa-plus-square-o'
          }
          // keepSource: true,
          // page: false
        });

        this.findlists()
      
      });
    },
    linkEvent({ row }) {
      console.log(row.name)
    },
    findlists(){
      getCategorys({
        page: this.tablePage.currentPage, // 当前页
        pageSize: this.tablePage.pageSize, // 每页条数
        // ...this.formSearchData  //检索条件
        // page: 1, // 当前页
        // pageSize: 100, // 每页条数

      }).then(({data}) => {
        // console.log('data.totaldata.totaldata.total',data.total);
        this.tablePage.totalResult = data.total || 0
        const datree = XEUtils.toArrayTree(data, {strict: true, parentKey: 'parent_id', key: 'id', children: 'children'})
        this.$refs.demoTable.loadLocalData(datree);
      })
    },
    updateHander({row}){
      console.log('diyrows',row);
    },

    createTable() {

      const column = [  //动态增加的字段 传进来的
        // { type: 'seq', width: 60, fixed: null },
        { type: 'seq', width: 60, fixed: 'left' },
        { type: 'radio', title: 'id', width: 40, fixed: 'left' ,
          slots: {
            header: ()=>{
              return [
                    <el-button
                      type={"text"}
                      onClick={ () => {
                        this.$refs.demoTable.$refs.xGrid.clearRadioRow()
                      }}
                      style="padding: 2px 0;"
                      >
                      <i class={"el-icon-close"} style={"font-size: 18px;"}></i>
                    </el-button>
              ]
            } 
          }
        },
        // { type: 'checkbox', width: 50, fixed: null },
        {title: '操作列', fixed: 'left' , width: 200, cellRender:{
          name: 'DiyOperationColumn', 
          children: [
              { 
                content: this.$t('修改'), 
                nativeType: 'el-button',
                props: {
                  type: 'text',size:'mini'
                },
                events:{click:this.updateHander} 
              }, 
              { 
                content: this.$t('删除'), 
                nativeType: 'el-popconfirm',
                props: {
                  elbutton: {
                    type: 'text',
                    size:'mini',
                    slot:"reference"
                  },
                  popconfirm: {
                    confirmButtonText:this.$t('base.affirm'),
                    cancelButtonText:this.$t('base.cancel'),
                    icon:"el-icon-info",
                    iconColor:"red",
                    title:this.$t('message.msg2')

                  }
                },
                events:{confirm:this.removeEvent} 
              },
              {
                content: this.$t('期限点'), 
                nativeType: 'el-popconfirm',
                props: {
                  elbutton: {
                    type: 'text',
                    size:'mini',
                    slot:"reference"
                  },
                  popconfirm: {
                    confirmButtonText:this.$t('base.affirm'),
                    cancelButtonText:this.$t('base.cancel'),
                    icon:"el-icon-info",
                    iconColor:"red",
                    title:this.$t('message.msg2')

                  }
                },
                events:{confirm:this.removeEvent} 
              },

            ]
          }
        },
        {field: 'title', title: '标题', width: 200, showOverflow: true, treeNode: true },
        {field: 'pic_title_pc', title: 'pc封面图', width: 300},
        {field: 'created_at', title: '更新时间', width: 200},
        {field: 'updated_at', title: '修改时间', width: 200},
        {
          field: 'author', title: '作者', width: 300, 
          formatter(obj) {
            // console.log('formatterformatter', obj);
            if (obj.cellValue === 0) {
              return "admin"
            } else {
              return "无名"
            }
          }
        }
      ]
      this.getTableData(column);




    }
  }
};
</script>
<style lang="scss" scoped></style>
